<template>
  <div class="goods-list">
    <!-- 一、 标签式导航 -->
    <!-- <router-link tag="div" to="/home/goodsInfo" class="goods-item" v-for="(item,i) in list" :key="i">
      <img :src="item.img " />
      <h1 class="title">{{ item.name }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.nowpri }}</span>
          <span class="old">￥{{ item.oldpri }}</span>
        </p>
        <p class="sell">
          <span>{{ item.sell }}</span>
          <span>剩余{{ item.num }}件</span>
        </p>
      </div>
    </router-link>-->

    <!-- 二、 编程式导航 -->
    <div
      to="/home/goodsInfo"
      class="goods-item"
      v-for="(item,i) in list"
      :key="i"
      @click="goDetail"
    >
      <img :src="item.img " />
      <h1 class="title">{{ item.name }}</h1>
      <div class="info">
        <p class="price">
          <span class="now">￥{{ item.nowpri }}</span>
          <span class="old">￥{{ item.oldpri }}</span>
        </p>
        <p class="sell">
          <span>{{ item.sell }}</span>
          <span>剩余{{ item.num }}件</span>
        </p>
      </div>
    </div>
    <mt-button type="danger" plain size="large" @click.prevent="getMore">加载更多</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        }
      ],
      newList: [
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        },
        {
          img: "../images/mi.png",
          name: "小米(mi)",
          nowpri: 899,
          oldpri: 999,
          sell: "热卖中",
          num: 60
        }
      ]
    };
  },
  methods: {
    getMore() {
      this.list = this.list.concat(this.newList);
      console.log(this.list.length);
    },
    goDetail() {
      // 使用JS的形式进行路由导航
      // 注意：一定要区分 this.$route 和 this.$router 这两个对象，
      // 其中：this.$route 是路由参数对象，所有路由的参数，params，query都属于它
    //   其中：this.$router 是一个路由导航对象，用它可以方便使用 JS 代码，实现路由的前进、后退、跳转到新的URL地址
      this.$router.push("/home/goodsInfo");
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.goods-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.goods-list img {
  width: 100%;
}
.goods-list .goods-item {
  width: 47%;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #ccc, -1px -1px 1px #ccc;
  border-radius: 5px;
  margin: 5px;
  padding-bottom: 5px;
}
.goods-list .goods-item h1 {
  font-size: 18px;
  line-height: 20px;
}
.goods-list .goods-item .info {
  background-color: rgba(0, 0, 0, 0.05);
  margin-top: 5px;
  padding: 5px;
}
.goods-list .goods-item .price {
  font-size: 18px;
  line-height: 20px;
  color: red;
}
.goods-list .goods-item .old {
  margin-left: 5px;
  font-size: 12px;
  color: #ccc;
  text-decoration: line-through;
}
.goods-list .goods-item .sell {
  margin-left: 5px;
  font-size: 12px;
  color: #ccc;
  display: flex;
  justify-content: space-between;
}
</style>